<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        li {
            width: 23%;
            border: 1px solid #000;
            text-align: center;
            line-height: 2;
            margin: 10px;
        }

        li img {
            width: 90%;
        }

        li span {
            color: red;
        }

        div {
            justify-content: center;
            display: flex;
            height: 30px;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="可输入11或14或13">
        <button>搜索</button>
    </div>

    <ul>
        <!-- <li>
            <img src="https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png" alt="">
            <h3>HUAWEI MatePad Pro 12英寸</h3>
            <p>OLED全面屏平板电脑</p>
            <span> ¥5199.00</span>
        </li> -->
    </ul>

    <script>
        var date = [
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为11",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为13",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为14",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为11",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为12",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为13",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为14",
                price: "¥5199.00"
            },
            {
                img: "https://res2.vmallres.com/shopdc//pic/2021108/39a61862-f453-4461-a166-eee708a590ae.png",
                des1: "HUAWEI MatePad Pro 12英寸",
                des2: "华为华为UI华为华为11",
                price: "¥222.00"
            },
        ];
        // 执行函数，传入数组date作为实参，将数组内容输出
        Upe(date);

        function Upe(arr) {
            var str = "";
            // 通过空字符串接收模板字符串内容
            arr.forEach(function (item, m) {
                str += `<li>
            <img src="${item.img}" alt="">
            <h3>${item.des1}</h3>
            <p>${item.des2}</p>
            <span> ${item.price}</span>
            </li>
            `
            })
            // return str;

            // 将内容推到页面上
            document.querySelector("ul").innerHTML = str;
        }

        // 点击时刷新出符合条件的商品
        //  事件监听使用
        document.querySelector("button").addEventListener("click", function () {
            // 循环过滤符合条件的商品
            var newdate = date.filter(function (item, m) {
                // 只要输入文本框的值(value),在商品中出现(不论值的多少),则输出
                return item.des2.includes(document.querySelector("input").value);
            })
            // 执行函数，传入实参newdate，将过滤后的新的数组newarr的内容推到页面上
            Upe(newdate);
            Upe(newdate);
        })


        // document.querySelector("button").onclick = function () {
        //     var newdate = date.filter(function (item, m) {
        //         return item.price.includes(document.querySelector("input").value);
        //     })
        //     Upe(newdate);
        // }
    </script>
</body>

</html>